{% extends 'base.html' %}
{% block content %}

<style>
    .pre-scrollable {
        max-height: 400px;
        overflow-y: auto;
        white-space: pre-wrap; /* 保留换行 */
        word-wrap: break-word; /* 长单词自动换行 */
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid #ced4da;
    }

    .card-header {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .btn-secondary:hover {
        background-color: #6c757d;
        color: #fff;
        text-decoration: none;
    }

    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>

<div class="container py-5 fade-in">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-3">
                <div class="card-header bg-success text-white text-center py-3">
                    <h4 class="mb-0">🔓 解密后的农产品溯源信息</h4>
                </div>
                <div class="card-body p-4">
                    <div class="mb-4">
                        <label class="form-label fw-bold">解密内容：</label>
                        <div class="pre-scrollable">
                            {{ decrypted_text }}
                        </div>
                    </div>

                    <div class="d-grid mt-4">
                        <a href="{% url 'agricultural_product_list' %}" class="btn btn-outline-secondary">
                            &larr; 返回农产品列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
